<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置邮箱</title>
    <script type="text/javascript">
        var basePath ="/";
    </script>
    <script src="/yb_system_js/common.js?myv=1597043701351"></script>
    <script src="/yb_system_js/jquery-3.5.1.min.js?myv=1597043701351"></script>
    <script src="/yb_system_js/footfixed.js?myv=1597043701351"></script>
    <script src="/yb_system_js/layer.js"></script>
    <script src="/yb_system_js/md5.js"></script>
    <style>
        .change-modul{
            font-size: 14px;
            color: #333;
            margin: 20px;
        }
        .phone-p{
            display: flex;
            align-items: center;
            margin: 30px 0;
        }
        .phone-p-title{
            width: 80px;
            text-align: right;
            margin-right: 20px;
        }
        .text-tip{
            margin-left:20px;
            color:rgba(41,167,230,1);
        }
        .change-input{
            width: 300px;
            padding:8px 10px;
            box-sizing: border-box;
            outline: 0;
            border:1px solid rgba(41,167,230,1);
            border-radius: 5px;
        }
        .new-input{
            width: 414px;
            padding:8px 10px;
            box-sizing: border-box;
            outline: 0;
            border:1px solid rgba(41,167,230,1);
            border-radius: 5px;
        }
        .send-btn{
            margin-left: 20px;
            padding: 8px 0;
            width: 94px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .check-btn{
            margin-left: 20px;
            padding: 8px 0;
            width: 94px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .next-btn{
            float: right;
            padding: 8px 16px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            background: #ccc;
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 30px;
        }
        .subm-btn{
            float: right;
            padding: 8px 16px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            background: #ccc;
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 30px;
        }
        .submPwd-btn{
            float: right;
            padding: 8px 16px;
            border:0;
            outline: 0;
            background: rgba(41,167,230,1);
            background: #ccc;
            color:#fff;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 30px;
        }
    </style>
</head>
<body>

<div class="change-modul">

    <div class="modul-div" th:if="${index==0}">
        <p class="phone-p">
            <span class="phone-p-title">原电子邮箱</span>
            <span th:text="${email}" id="email-value"></span>
            <span class="text-tip"><a href="/about/leave" target="_blank">无法接收通知？去反馈</a></span>
        </p>
        <p class="phone-p">
            <span class="phone-p-title">邮箱验证码</span>
            <input class="change-input" type="text" placeholder="请输入验证码" id="code1">
            <button type="button" class="check-btn">发送验证码</button>
        </p>
        <button type="button" disabled class="next-btn">下一步</button>
    </div>

    <div class="next-step-email" style="display: none;">
        <p class="phone-p">
            <span class="phone-p-title">新邮箱账号</span>
            <input class="new-input" id="cal" type="text" placeholder="请输入新邮箱">
        </p>
        <p class="phone-p">
            <span class="phone-p-title">验证码</span>
            <input class="change-input" type="text" placeholder="请输入验证码" id="code2">
            <button type="button" class="send-btn">发送验证码</button>
        </p>
        <button type="button" class="subm-btn" onclick="submBtn(0)">提交</button>
    </div>

    <div class="next-step" th:if="${index==1}">
        <p class="phone-p">
            <span class="phone-p-title">输入旧密码</span>
            <input class="new-input" type="password" placeholder="输入旧密码" id="pwdOld">
        </p>
        <p class="phone-p">
            <span class="phone-p-title">输入新密码</span>
            <input class="new-input" type="password" placeholder="输入新密码" id="pwd">
        </p>
        <p class="phone-p">
            <span class="phone-p-title">确认新密码</span>
            <input class="new-input" type="password" placeholder="确认新密码" id="pwd2">
        </p>
        <button type="button" class="submPwd-btn">提交</button>
    </div>

    <div class="next-step-email" th:if="${index==2}">
        <p class="phone-p">
            <span class="phone-p-title">新邮箱账号</span>
            <input class="new-input" id="cal2" type="text" placeholder="请输入新邮箱">
        </p>
        <p class="phone-p">
            <span class="phone-p-title">验证码</span>
            <input class="change-input" type="text" placeholder="请输入验证码" id="code3">
            <button type="button" class="send-btn">发送验证码</button>
        </p>
        <button type="button" class="subm-btn" onclick="submBtn(1)">提交</button>
    </div>

</div>

<script>
    $(function(){
        var email = $("#email-value").text();
        //第一步，发送验证码
        $(".check-btn").click(function(){
            var clickObj=this;
            //调用服务器发送验证码接口
            $.post(basePath+"personalSendeUpdateEmail?userName="+email+'&type=0',function(datas){
                if(datas.success){
                    daojishi(90,clickObj);
                }else{
                    layer.msg(datas.msg);
                }
            });
        })
        //点击下一步
        $(".next-btn").click(function(){
            var checkcode = $("#code1").val();
            if(checkcode == ''){
                layer.msg("请输入验证码！");
                return false;
            }
            // 校验验证码接口
            $.post(basePath+"personalCheckEmailCode?userName="+email+"&code="+checkcode+'&type=0',function(datas){
                if(datas.success){
                    $(".modul-div").hide();
                    $(".next-step-email").show();
                }else{
                    layer.msg(datas.msg);
                }
            });
        });

        //最后一步验证码
        $(".send-btn").click(function(){
            var index = [[${index}]];
            var cal = "cal"+index;
            var  userName='';
            if(cal=="cal2"){
                userName = $("#cal2").val();
            }else{
                userName = $("#cal").val();
            }

            window.console.log('ssssss'+userName)
            if(isNotEmail(userName)){
                layer.msg("请输入正确的邮箱123123"+userName);
                return false;
            }
            var clickObj=this;
            $.post(basePath+"personalSendeUpdateEmail?userName="+userName+'&type=1',function(datas){
                window.console.log(datas);
                if(datas.success){
                    layer.msg(datas.msg);
                    daojishi(90,clickObj);
                    changeSubmitButStatus();//改变提交按钮状态，颜色
                }else{
                    layer.msg(datas.msg);
                }
            });
        })
        //设置提交按钮颜色
        function changeSubmitButStatus(){
            $(".subm-btn").css("background-color","#1482C8");
        }
        function daojishi(seconds,obj){

            if (seconds > 1){
                $(obj).css("background-color","#ccc");

                $(".next-btn").attr("disabled", false).css("background-color","#1482C8");
                seconds--;
                $(obj).text(seconds+"s后重新发送").attr("disabled", true);//禁用按钮
                // 定时1秒调用一次
                setTimeout(function(){
                    daojishi(seconds,obj);
                },1000);
            }else{
                $(obj).css("background-color","#1482C8");
                $(obj).text("发送验证码").attr("disabled", false);//启用按钮
                $(".next-btn").attr("disabled", true).css("background-color","#ccc");
            }
        }
        changeSubmitPwdButStatus();
        $(".submPwd-btn").click(function(){
            var pwd2 = $("#pwd2").val();//确认密码
            var  pwd=$("#pwd").val();//密码1
            var pwdOld=$("#pwdOld").val();//旧密码
            if(undefined!=pwdOld&&isBlank(pwdOld)){
                layer.msg("请输入旧密码");
                return false;
            }
            if(isBlank(pwd)||pwd.length<6){
                layer.msg("新密码不能为空且不能小于6位长度");
                return false;
            }
            if(pwd2!=pwd){
                layer.msg("确认新密码错误！");
                return false;
            }
            pwd=MD5(pwd);
            if(undefined!=pwdOld){
                pwdOld=MD5(pwdOld);
            }

            $.post(basePath+"personalupdatePwd?pwd="+pwd+"&oldPwd="+pwdOld,function(datas){
                if(datas.success){
                    layer.msg(datas.msg);
                    layerClose(1500,true);
                }else{
                    layer.msg(datas.msg);
                }
            });
        })
        //设置提交按钮颜色
        function changeSubmitPwdButStatus(){
            $(".submPwd-btn").css("background-color","#1482C8");
        }

    })
    //最后一步提交
    function submBtn(type){
        var checkcode = $("#code2").val();
        var  userName = $("#cal").val();
        if(type == 1){
            checkcode = $("#code3").val();
            userName = $("#cal2").val();
        }
        if(checkcode == ''){
            layer.msg("请输入验证码！");
            return false;
        }
        if(isNotEmail(userName)){
            layer.msg("请输入正确的邮箱");
            return false;
        }
        $.post(basePath+"personalCheckEmailCode?userName="+userName+"&code="+checkcode+'&type=1',function(datas){
            if(datas.success){
                layer.msg(datas.msg);
                layerClose(1500,true);
            }else{
                layer.msg(datas.msg);
            }
        });
    }
</script>
</body>
</html>